<template>
  <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
    <el-tooltip effect="light" content="折叠/展开" placement="right" :enterable="false">
      <div class="toggle-button" @click="toggleCollapse">|||</div>
    </el-tooltip>
    <el-menu background-color="#274767" text-color="#fff" active-text-color="#E6A23C" unique-opened
      :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
      <el-menu-item index="/" @click="saveNavState('/')">
        <i class="el-icon-house"></i>
        <span v-if="!isCollapse">首页</span>
      </el-menu-item>
      <el-menu-item index="/users" @click="saveNavState('/users')">
        <i class="el-icon-user"></i>
        <span v-if="!isCollapse">用户管理</span>
      </el-menu-item>
      <el-menu-item index="/products" @click="saveNavState('/products')">
        <i class="el-icon-goods"></i>
        <span v-if="!isCollapse">商品管理</span>
      </el-menu-item>
      <el-menu-item index="/orders" @click="saveNavState('/orders')">
        <i class="el-icon-tickets"></i>
        <span v-if="!isCollapse">订单管理</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      activePath: this.$route.path,
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
  },
  created() {
    this.activePath = window.sessionStorage.getItem('activePath') || this.$route.path;
  },
};
</script>

<style scoped>
.sidebar {
  height: 100vh;
  /* Full height */
  background-color: #224c75;
  /* Background color */
  display: flex;
  flex-direction: column;
  /* Vertical layout */
}

.toggle-button {
  background: #6489ae;
  color: white;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  font-size: 10px;
  line-height: 24px;
  padding: 10px;
  margin-bottom: 0;
  /* Add space below toggle button */
  border-radius: 4px;
  /* Add border radius for aesthetics */
}

.el-menu-item {
  transition: background-color 0.3s;
  padding: 10px 20px;
  /* Add padding for better spacing */
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  /* Hover effect */
}

.el-menu-item i {
  margin-right: 10px;
  /* Space between icon and text */
}
</style>
